<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>个人信息</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="/static/home/public/img/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="/static/admin/assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <script src="/static/admin/assets/js/echarts.min.js"></script>
    <link rel="stylesheet" href="/static/admin/assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="/static/admin/assets/css/amazeui.datatables.min.css" />
    <link rel="stylesheet" href="/static/admin/assets/css/app.css">
    <script src="/static/admin/assets/js/jquery.min.js"></script>

</head>

<body data-type="index" class="theme-white">
    <div class="am-g tpl-g">
        <!-- 头部 -->
        <header>

        </header>


        <!-- 内容区域 -->
        <div class="tpl-content-wrapper">
            {% block con-header %}
			<div class="container-fluid am-cf">
			    <div class="row">
			        <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
			            <div class="page-header-heading">
			                <span class="am-icon-home page-header-heading-icon"></span>
			                信息修改
			            </div>
			        </div>
			    </div>
			</div>
            {% endblock %}
            {% block con-footer %}
			<div class="row-content am-cf">
				<div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
				    <div class="widget am-cf">
				        <div class="widget-head am-cf">
				            <div class="widget-title am-fl">个人信息</div>
				            <div class="widget-function am-fr">
				                <!-- <a href="javascript:;" class="am-icon-cog"></a> -->
				            </div>
				        </div>
				        <div class="widget-body am-fr">

				            <form class="am-form tpl-form-line-form" action="{% url 'userupdate' %}" method="post" enctype="multipart/form-data">
				            	<!-- 用户名 -->
				                <div class="am-form-group">
				                    <label for="user-name" class="am-u-sm-3 am-form-label">用户名
				                    </label>
				                    <div class="am-u-sm-9">
				                        <input type="text" class="tpl-form-input" id="user-name" name="username"
				                        value="{{ uinfo.username }}">
				                    </div>
				                </div>
				                <!-- 邮箱 -->
				                <div class="am-form-group">
				                    <label for="user-name" class="am-u-sm-3 am-form-label">邮箱
				                    </label>
				                    <div class="am-u-sm-9">
				                        <input type="text" class="tpl-form-input" id="user-name" value="{{ uinfo.email }}" name="email">
				                    </div>
				                </div>
				                <!-- 电话 -->
				                <div class="am-form-group">
				                    <label for="user-name" class="am-u-sm-3 am-form-label">电话
				                    </label>
				                    <div class="am-u-sm-9">
				                        <input type="text" class="tpl-form-input" id="user-name" value="{{ uinfo.phone }}" name="phone">
				                    </div>
				                </div>
				                <!-- 年龄 -->
				                <div class="am-form-group">
				                    <label for="user-name" class="am-u-sm-3 am-form-label">年龄
				                    </label>
				                    <div class="am-u-sm-9">
				                        <input type="text" class="tpl-form-input" id="user-name" value="{{ uinfo.age }}" name="age">
				                    </div>
				                </div>
								<!-- 性别 -->
								<div class="am-form-group">
									<label for="user-name" class="am-u-sm-3 am-form-label">
									    性别
									</label>
									<div class="am-u-sm-9">
									    <div class="am-form-group">
										{% if uinfo.sex == '男' %}
											<label class="am-radio-inline"><input type="radio" name="sex" value="男" checked> 男</label>
									        <label class="am-radio-inline"><input type="radio" name="sex" value="女" > 女</label>
									    {% elif uinfo.sex == '女' %}
									    	<label class="am-radio-inline"><input type="radio" name="sex" value="男" > 男</label>
									        <label class="am-radio-inline"><input type="radio" name="sex" value="女" checked> 女</label>
										{% endif %}
									    </div>
									</div>
								</div>

				                <div class="am-form-group">
				                    <label for="user-weibo" class="am-u-sm-3 am-form-label">头像
				                    </label>
				                    <div class="am-u-sm-9">
				                        <div class="am-form-group am-form-file">
				                            <div class="tpl-form-file-img">
				                                <img src="{{ uinfo.picurl }}" alt="" width=50 id="filepicurl">
				                            </div>
				                            <button type="button" class="am-btn am-btn-danger am-btn-sm">
												<i class="am-icon-cloud-upload"></i> 添加头像图片
											</button>
				                            <input id="doc-form-file" type="file" multiple="" name="picurl">
				                        </div>
				                    </div>
				                </div>
				                <!-- ajax上传图片 -->
				                <script type="text/javascript">
				                	$('#doc-form-file').change(function(){
				                		// 创建一个表单对象
				                		var form = new FormData()
				                		// 获取当前选择的文件
				                		file = this.files[0]
				                		// 把当前的文件添加到表单对象中
				                		form.append('pic',file)
				                		form.append('csrfmiddlewaretoken','{{ csrf_token }}')
				                		// 发送ajax
				                		$.ajax({
				                			url :'{% url "admin_ajax_upload" %}',
				                			type:'POST',
				                			data:form,
				                			processData:false,//设置ajax不处理发送的数据
				                			contentType:false,//不去设置context-Type请求头
				                			async:true,//异步请求
				                			success:function(data){
				                				// 判断文件是否上传成功
				                				if(data['code']==0){
				                					// 把上传的图片动态加载到页面中
				                					$('#filepicurl').attr('src',data['url'])
				                					// 把上传的图片的路径，添加到表单中
				                					$('input[name=pic]').val(data['url'])
				                				}else{
				                					alert(data['msg'])
				                				}
				                			}
				                		});
				                	});
				                </script>
								{% csrf_token %}
								<input type="hidden" name="uid" value="{{ uinfo.id }}">
				                <div class="am-form-group">
				                    <div class="am-u-sm-9 am-u-sm-push-3">
				                        <button  class="am-btn am-btn-primary tpl-btn-bg-color-success ">提交</button>
				                    </div>
				                </div>

				            </form>
				        </div>
				    </div>
				</div>


			</div>
            {% endblock %}
        </div>
    </div>
    </div>
    <script src="/static/admin/assets/js/amazeui.min.js"></script>
    <script src="/static/admin/assets/js/amazeui.datatables.min.js"></script>
    <script src="/static/admin/assets/js/dataTables.responsive.min.js"></script>
    <script src="/static/admin/assets/js/app.js"></script>

</body>

</html>